<template>
  <div>
  	<div class='line_chart'>
  		  <div class='up_num'>{{kline.UP_NUM | fillPosition}}</div>
  		  <div class='up_arrow'><i class="iconfont icon-shangsanjiao"></i></div>
  		  <div class='line_part'>
  		  	<div class='up_part' :style="{width: percent + '%'}"></div>
  	      <div class='down_part' :style="{width: (100-percent)+'%'}"></div>
  		  </div>
  	    <div class='down_arrow'><i class="iconfont icon-xiasanjiao"></i></div>
  	    <div class='down_num'>{{kline.DOWN_NUM | fillPosition}}</div>
  	</div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      percent: 50,
      lineCanvas: 'down_line' + this.index
    }
  },
  props: {
    kline: Object,
    index: Number
  },
  filters: {
    fillPosition (str) {
      let num = typeof (str) !== 'number' ? parseInt(str) : str
      if (num < 10) {
        num = ' ' + num
      }
      return num
    }
  },
  methods: {
    init () {
      let up = parseInt(this.kline.UP_NUM)
      let down = parseInt(this.kline.DOWN_NUM)
      if ((up + down) === 0) {
        this.percent = 50
      } else if (up === 0) {
        this.percent = 0
      } else if (down === 0) {
        this.percent = 100
      } else {
        this.percent = up / (up + down) * 100
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.arrow{
	width:10px;
	height:24px;
	margin-left:10px;
}
.line_chart{
    display:flex;
    margin:10px 0 10px 0;
    font-size:28px;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      height:8px;
    }
    .down_arrow{
    	color:#13b250;
    	margin:0 5px 0 13px;
    	i{
    		font-size:14px;
    	}
    }
    .up_arrow{   	
    	color:#f13137;
      margin:0 13px 0 5px;
      i{
      	font-size:14px;
      }
    }
    .line_part{
	    width:120px;
	    height: 10px;
	    background: #eb333b;
	    border-radius: 7px;
      .down_part{
    	  border-radius: 7px;
	      background-color:#19ae52;
	      float:right;
	      height: 100%;
	      display: inline;
      }
    }
}

</style>
